<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-left">
        <h1 class="title">innoClub</h1>
        <p class="slogan">
          打造你的技术成长之路 —— 从这里开始你的编程进阶之旅
        </p>
        <ul class="feature-list">
          <li class="feature-item">
            <div class="feature-icon">
              <a-icon type="code" style="color: #fff; font-size: 16px;" />
            </div>
            <div class="feature-text">
              海量优质编程题库，循序渐进提升技术实力
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon">
              <a-icon type="robot" style="color: #fff; font-size: 16px;" />
            </div>
            <div class="feature-text">
              AI智能助手，为你解答技术难题，指导学习方向
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon">
              <a-icon type="team" style="color: #fff; font-size: 16px;" />
            </div>
            <div class="feature-text">
              活跃的技术社区，分享经验，共同成长
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon">
              <a-icon type="solution" style="color: #fff; font-size: 16px;" />
            </div>
            <div class="feature-text">
              模拟面试系统，助你轻松应对技术面试
            </div>
          </li>
        </ul>
      </div>
      <div class="login-right">
        <div class="login-form">
          <div class="login-type">
            <span class="active">密码登录</span>
            <a-tooltip placement="bottom" title="暂不支持">
              <span class="disabled">验证码登录</span>
            </a-tooltip>
          </div>
          <a-form :form="form" @submit="handleSubmit">
            <a-form-item>
              <a-input
                v-decorator="[
                  'username',
                  { rules: [{ required: true, message: '请输入手机号/账号!' }] }
                ]"
                size="large"
                placeholder="手机号/账号"
              >
                <a-icon slot="prefix" type="user" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input-password
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入密码!' }] }
                ]"
                size="large"
                placeholder="密码"
              >
                <a-icon slot="prefix" type="lock" />
              </a-input-password>
            </a-form-item>
            <div class="form-footer">
              <a-checkbox v-model="rememberPassword" @change="handleRememberChange">记住我</a-checkbox>
              <a class="forgot-link" @click="handleForgotPassword">忘记密码?</a>
            </div>
            <a-form-item>
              <a-button type="primary" html-type="submit" size="large" block :loading="loggingIn">
                登录
              </a-button>
            </a-form-item>
            
            <div class="register-link">
              <span>没有账号？</span>
              <router-link to="/register">立即注册</router-link>
            </div>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { auth } from '@/api/auth'
import { EventBus } from '@/utils/eventBus'

export default {
  name: 'Login',
  data() {
    return {
      rememberPassword: false,
      loggingIn: false
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  created() {
    // 页面加载时检查是否有存储的账号密码
    const savedAccount = localStorage.getItem('rememberedAccount')
    if (savedAccount) {
      const account = JSON.parse(savedAccount)
      this.rememberPassword = true
      // 设置表单初始值
      this.$nextTick(() => {
        this.form.setFieldsValue({
          username: account.username,
          password: this.decryptPassword(account.password)
        })
      })
    }
  },
  methods: {
    handleForgotPassword() {
      this.$message.warn('暂不支持')
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.loggingIn = true
          try {
            const res = await auth.login({
              username: values.username,
              password: values.password
            })
            
            const { tokenValue, loginId } = res.content.data
            localStorage.setItem('token', tokenValue)
            localStorage.setItem('loginId', loginId)
            
            // 处理记住密码
            if (this.rememberPassword) {
              this.saveAccount(values.username, values.password)
            } else {
              this.clearSavedAccount()
            }
            
            this.$message.success('登录成功')
            EventBus.$emit('loginSuccess')
            this.$router.push('/')
          } catch (error) {
            
          } finally {
            this.loggingIn = false
          }
        }
      })
    },
    
    // 处理记住密码选项变化
    handleRememberChange(e) {
      if (!e.target.checked) {
        this.clearSavedAccount()
      }
    },
    
    // 保存账号密码
    saveAccount(username, password) {
      const account = {
        username,
        password: this.encryptPassword(password)
      }
      localStorage.setItem('rememberedAccount', JSON.stringify(account))
    },
    
    // 清除保存的账号密码
    clearSavedAccount() {
      localStorage.removeItem('rememberedAccount')
    },
    
    // 加密密码 (简单的Base64加密，实际项目中建议使用更安全的加密方式)
    encryptPassword(password) {
      return window.btoa(password)
    },
    
    // 解密密码
    decryptPassword(encrypted) {
      return window.atob(encrypted)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  padding: 20px;
}

.login-container {
  width: 1000px;
  max-width: 100%;
  height: auto;
  min-height: 600px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  overflow: hidden;

  @media (max-width: 768px) {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }
}

.login-left {
  flex: 1;
  background: linear-gradient(140deg, #2563eb 0%, #3b82f6 45%, #60a5fa 100%);
  padding: 48px;
  color: white;
  border-radius: 8px 0 0 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  @media (max-width: 768px) {
    padding: 24px;
    border-radius: 8px 8px 0 0;
    
    .feature-list {
      display: none; // 在移动端隐藏特性列表
    }
  }

  .title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      font-size: 28px;
      text-align: center;
    }
  }

  .slogan {
    font-size: 16px;
    margin-bottom: 48px;
    line-height: 1.6;
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      font-size: 14px;
      margin-bottom: 24px;
      text-align: center;
    }
  }
}

.login-right {
  width: 400px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  @media (max-width: 768px) {
    width: 100%;
    padding: 24px;
  }
}

.login-form {
  width: 100%;

  .login-type {
    margin-bottom: 24px;
    display: flex;
    gap: 24px;

    span {
      font-size: 16px;
      color: #666;
      cursor: pointer;
      padding-bottom: 8px;
      position: relative;

      &.active {
        color: #1890ff;
        font-weight: 500;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background: #1890ff;
        }
      }

      &.disabled {
        color: #999;
        cursor: not-allowed;
      }
    }
  }

  .form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .register-link {
    text-align: center;
    margin-top: 16px;

    a {
      color: #1890ff;
      margin-left: 8px;
    }
  }
}

.feature-list {
  margin-top: auto;
  position: relative;
  z-index: 1;

  .feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }

    .feature-icon {
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }

    .feature-text {
      font-size: 14px;
      line-height: 1.6;
      opacity: 0.9;
    }
  }
}

// 添加动画效果
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 